<template>
  <div>
    <el-drawer :close-on-click-modal="false" :title="title" :model-value="isShow" @open="onOpen"
      @close="onClose" append-to-body size="100%">
      <el-form ref="form" :model="form" :rules="rules" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item style="margin-bottom: 0" label="分类" prop="tagId">
              <ZhongyiComponentsTagTree v-model="form.tagId" type="2" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="方剂名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="药典" prop="yaoDian">
              <el-input v-model="form.yaoDian" />
            </el-form-item>
          </el-col>
        </el-row>

        <div>方剂组成 <el-button type="primary" link @click="onAddZuChen">
            <el-icon :size="20" class="mr-1">
              <IconIcOutlineAdd />
            </el-icon></el-button></div>
        <el-row :gutter="20" v-for="(item, index) in form.fangJiZuChengs" :key="index" style="margin-top:10px">
          <el-col :span="6">
            <el-button type="primary" link @click="onOpenYaocai(index)"> 
              <el-icon :size="20" >
                <IconIcOutlineAdd />
              </el-icon></el-button>
            <el-button type="danger" link @click="onDeleteYaocai(index)">
              <el-icon :size="20" class="-ml-4">
                <IconIcOutlineDelete />
              </el-icon></el-button>
            <span style="margin-left:10px">药材：{{ item.yaoCaiName }}</span>
          </el-col>
          <el-col :span="18">
            <el-form-item style="margin-bottom: 0" label="用量" prop="tagId">
              <el-input v-model="item.yaoCaiWeight" type="textarea" :rows="2" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="用法" prop="yongFaYongLiang" style="margin-top:10px">
          <el-input v-model="form.yongFaYongLiang" type="textarea" :rows="2" />
        </el-form-item>

        <el-form-item label="功效" prop="gongXiao">
          <el-input v-model="form.gongXiao" />
        </el-form-item>

        <el-form-item label="主治" prop="zhuZhi">
          <el-input v-model="form.zhuZhi" type="textarea" :rows="2" />
        </el-form-item>

        <el-form-item label="证治机理" prop="jiLi">
          <el-input v-model="form.jiLi" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="方解" prop="fangJie">
          <el-input v-model="form.fangJie" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="运用" prop="yunYong">
          <el-input v-model="form.yunYong" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="方歌" prop="fangGe">
          <el-input v-model="form.fangGe" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSave">确认</el-button>
      </template>
    </el-drawer>

    <ZhongyiComponentsYaocai  
      v-model:isShow="isShowYaoCai"
      title="药材管理"
      @onSelect = "onSelect"/>
  </div>
</template>

<script>
import { getDetail, save } from "@/api/zhongyi/fangji";
import { getAll } from "@/api/zhongyi/yaocai";

export default {
  components: {},
  props: {
    data: {
      required: true,
      type: String,
      default: "",
    },
    isShow: {
      require: true,
      type: Boolean,
      default: false,
    },
    title: {
      require: true,
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      rules: {},
      tenants: [],
      yaocais: [],
      isShowYaoCai: false,
      row: -1
    };
  },
  mounted() {
    getAll().then(res => {
      this.yaocais = res.result
    })
  },
  methods: {
    async onOpen() {
      if (this.data) {
        const user = await getDetail(this.data);
        this.form = user.result;
        // this.form.roles = user.data.roles
      } else {
        this.form = {
          name: "",
          yaoDian: "",
          fangJiZuChengs: [{
            yaoCaiId: '',
            yaoCaiName: '',
            yaoCaiWeight: ''
          }],
          yongFaYongLiang: "",
          gongXiao: "",
          zhuZhi: "",
          jiLi: "",
          fangJie: "",
          yunYong: "",
          fangGe: "",
          tagId: ""
        };
      }
    },
    async onSave() {
      //if(this.data) {
      await save(this.form);
      //}
      //else {
      // await addUser(this.form)
      //}
      this.$emit("onChange", this.form);
      this.$emit("update:isShow", false)
    },
    onCancel() {

    },
    onClose() {
      this.$emit("update:isShow", false)
    },
    onAddZuChen() {
      this.isShowYaoCai = true
      this.row = this.form.fangJiZuChengs.length
    },
    onOpenYaocai(item) {
      this.isShowYaoCai = true
      this.row = item + 1
    },
    onSelect(row) {
      
      this.isShowYaoCai = false

      let item = {
        yaoCaiId: row.id,
        yaoCaiName: row.name,
        yaoCaiWeight: ''
      }

      this.form.fangJiZuChengs.splice(this.row, 0, item)

    },
    onDeleteYaocai(item) {
      //const index = this.form.fangJiZuChengs.findIndex(t => t.yaoCaiId == item.yaoCaiId)
      this.form.fangJiZuChengs.splice(item, 1)
    }
  },
  watch: {
    data: async function () { },
  },
};
</script>


